<template>
  <div class="classification">
    <p>能效分析模块</p>
    <div class="scatterlist" v-for="(item,index) in scatterList" :key="index">
      <Scatter :listScatterItem="item"  :Scattertitle="item.series[0].name"></Scatter>
    </div>
    <div style="width: 100%;overflow: hidden;margin-left: 80%;">
      <el-button type="warning" @click="prePage()">上一页</el-button><el-button type="warning" @click="nextPage()">下一页</el-button>
    </div>
  </div>
</template>

<script>
  import Scatter from '@/components/Scatter.vue'
  export default {
    components: {
      Scatter
    },
    data() {
      return {
         scatterListpre: [
           {
             title: { text: 'PV图',x:'center',y: '8', },
             tooltip: {
               trigger: 'axis',
               axisPointer: {
                 type: 'cross'
               }
             },
             grid: {
               top: 40,
               bottom: 20,
             },
             xAxis: [{
               splitLine: {
                 lineStyle: {
                 }
               },
             },{
               splitLine: {
                 lineStyle: {
                 }
               },
             }],
             yAxis: [
               {
                 type : 'value',
                 //设置轴线的属性
                 axisLine:{
                   lineStyle:{
                     // color:'#000',
                   }
                 }
               },
               {
                 type : 'value',
                 //设置轴线的属性
                 axisLine:{
                   lineStyle:{
                     // color:'#000',
                   }
                 }
               }

             ],
             series: [{
               name: '一级驱动端气缸轴侧',
               symbolSize: 5,
               color: 'skyblue',
               data: [
                 [10.0, 8.04],
                 [8.0, 6.95],
                 [13.0, 7.58],
                 [9.0, 8.81],
                 [11.0, 8.33],
                 [14.0, 9.96],
                 [6.0, 7.24],
                 [4.0, 4.26],
                 [12.0, 10.84],
                 [7.0, 4.82],
                 [5.0, 5.68]
               ],
               type: 'scatter'
             },
               {
                 symbolSize: 5,
                 color: 'yellow',
                 data: [
                   [5.0, 5.68]
                     [5.0, 5.98],
                   [6.0, 6.68],
                   [7.0, 6.98],
                   [8.0, 7.78],
                   [9.0, 8.68],
                   [10.0, 7.98],
                   [11.0, 6.88],
                   [12.0, 7.68],
                   [13.0, 8.68],
                   [14.0, 9.68],

                 ],
                 type: 'scatter'
               },
               {
                 symbolSize: 5,
                 color: 'pink',
                 data: [
                   [1, 1]
                     [2, 2],
                   [3, 3],
                   [4, 4.98],
                   [5.0, 5.78],
                   [6.0, 5.68],
                   [7.0, 5.98],
                   [8.0, 5.88],
                   [9.0, 5.68],
                   [10.0, 5.68],
                   [11.0, 5.68],
                   [12.0, 5.68],
                   [13.0, 5.68],
                   [14.0, 5.68],
                   [15.0, 5.68],
                   [16.0, 5.68],
                   [17.0, 5.68]
                 ],
                 type: 'scatter'
               }]
           },
           {
             title: { text: 'PV图',x:'center',y: '8' },
             tooltip: {
               trigger: 'axis',
               axisPointer: {
                 type: 'cross'
               }
             },
             grid: {
               top: 40,
               bottom: 20,
             },
             xAxis: [{
               splitLine: {
                 lineStyle: {
                 }
               },
             },{
               splitLine: {
                 lineStyle: {
                 }
               },
             }],
             yAxis: [
               {
                 type : 'value',
                 //设置轴线的属性
                 axisLine:{
                   lineStyle:{
                     // color:'#000',
                   }
                 }
               },
               {
                 type : 'value',
                 //设置轴线的属性
                 axisLine:{
                   lineStyle:{
                     // color:'#000',
                   }
                 }
               }

             ],
             series: [{
               name: '一级自由端气缸轴侧',
               symbolSize: 5,
               color: 'skyblue',
               data: [
                 [10.0, 8.04],
                 [8.0, 6.95],
                 [13.0, 7.58],
                 [9.0, 8.81],
                 [11.0, 8.33],
                 [14.0, 9.96],
                 [6.0, 7.24],
                 [4.0, 4.26],
                 [12.0, 10.84],
                 [7.0, 4.82],
                 [5.0, 5.68]
               ],
               type: 'scatter'
             },
               {
                 symbolSize: 5,
                 color: 'yellow',
                 data: [
                   [5.0, 5.68]
                     [5.0, 5.98],
                   [6.0, 6.68],
                   [7.0, 6.98],
                   [8.0, 7.78],
                   [9.0, 8.68],
                   [10.0, 7.98],
                   [11.0, 6.88],
                   [12.0, 7.68],
                   [13.0, 8.68],
                   [14.0, 9.68],

                 ],
                 type: 'scatter'
               },
               {
                 symbolSize: 5,
                 color: 'pink',
                 data: [
                   [1, 1]
                     [2, 2],
                   [3, 3],
                   [4, 4.98],
                   [5.0, 5.78],
                   [6.0, 5.68],
                   [7.0, 5.98],
                   [8.0, 5.88],
                   [9.0, 5.68],
                   [10.0, 5.68],
                   [11.0, 5.68],
                   [12.0, 5.68],
                   [13.0, 5.68],
                   [14.0, 5.68],
                   [15.0, 5.68],
                   [16.0, 5.68],
                   [17.0, 5.68]
                 ],
                 type: 'scatter'
               }]
           },
           {
             title: { text: 'PV图',x:'center',y: '8' },
             tooltip: {
               trigger: 'axis',
               axisPointer: {
                 type: 'cross'
               }
             },
             grid: {
               top: 40,
               bottom: 20,
             },
             xAxis: [{
               splitLine: {
                 lineStyle: {
                 }
               },
             },{
               splitLine: {
                 lineStyle: {
                 }
               },
             }],
             yAxis: [
               {
                 type : 'value',
                 //设置轴线的属性
                 axisLine:{
                   lineStyle:{
                     // color:'#000',
                   }
                 }
               },
               {
                 type : 'value',
                 //设置轴线的属性
                 axisLine:{
                   lineStyle:{
                     // color:'#000',
                   }
                 }
               }

             ],
             series: [{
               name: '一级驱动端气缸盖侧',
               symbolSize: 5,
               color: 'skyblue',
               data: [
                 [10.0, 8.04],
                 [8.0, 6.95],
                 [13.0, 7.58],
                 [9.0, 8.81],
                 [11.0, 8.33],
                 [14.0, 9.96],
                 [6.0, 7.24],
                 [4.0, 4.26],
                 [12.0, 10.84],
                 [7.0, 4.82],
                 [5.0, 5.68]
               ],
               type: 'scatter'
             },
               {
                 symbolSize: 5,
                 color: 'yellow',
                 data: [
                   [5.0, 5.68]
                     [5.0, 5.98],
                   [6.0, 6.68],
                   [7.0, 6.98],
                   [8.0, 7.78],
                   [9.0, 8.68],
                   [10.0, 7.98],
                   [11.0, 6.88],
                   [12.0, 7.68],
                   [13.0, 8.68],
                   [14.0, 9.68],

                 ],
                 type: 'scatter'
               },
               {
                 symbolSize: 5,
                 color: 'pink',
                 data: [
                   [1, 1]
                     [2, 2],
                   [3, 3],
                   [4, 4.98],
                   [5.0, 5.78],
                   [6.0, 5.68],
                   [7.0, 5.98],
                   [8.0, 5.88],
                   [9.0, 5.68],
                   [10.0, 5.68],
                   [11.0, 5.68],
                   [12.0, 5.68],
                   [13.0, 5.68],
                   [14.0, 5.68],
                   [15.0, 5.68],
                   [16.0, 5.68],
                   [17.0, 5.68]
                 ],
                 type: 'scatter'
               }]
           },
           {
             title: { text: 'PV图',x:'center',y: '8' },
             tooltip: {
               trigger: 'axis',
               axisPointer: {
                 type: 'cross'
               }
             },
             grid: {
               top: 40,
               bottom: 20,
             },
             xAxis: [{
               splitLine: {
                 lineStyle: {
                 }
               },
             },{
               splitLine: {
                 lineStyle: {
                 }
               },
             }],
             yAxis: [
               {
                 type : 'value',
                 //设置轴线的属性
                 axisLine:{
                   lineStyle:{
                     // color:'#000',
                   }
                 }
               },
               {
                 type : 'value',
                 //设置轴线的属性
                 axisLine:{
                   lineStyle:{
                     // color:'#000',
                   }
                 }
               }

             ],
             series: [{
               name: '一级自由端气缸盖侧',
               symbolSize: 5,
               color: 'skyblue',
               data: [
                 [10.0, 8.04],
                 [8.0, 6.95],
                 [13.0, 7.58],
                 [9.0, 8.81],
                 [11.0, 8.33],
                 [14.0, 9.96],
                 [6.0, 7.24],
                 [4.0, 4.26],
                 [12.0, 10.84],
                 [7.0, 4.82],
                 [5.0, 5.68]
               ],
               type: 'scatter'
             },
               {
                 symbolSize: 5,
                 color: 'yellow',
                 data: [
                   [5.0, 5.68]
                     [5.0, 5.98],
                   [6.0, 6.68],
                   [7.0, 6.98],
                   [8.0, 7.78],
                   [9.0, 8.68],
                   [10.0, 7.98],
                   [11.0, 6.88],
                   [12.0, 7.68],
                   [13.0, 8.68],
                   [14.0, 9.68],

                 ],
                 type: 'scatter'
               },
               {
                 symbolSize: 5,
                 color: 'pink',
                 data: [
                   [1, 1]
                     [2, 2],
                   [3, 3],
                   [4, 4.98],
                   [5.0, 5.78],
                   [6.0, 5.68],
                   [7.0, 5.98],
                   [8.0, 5.88],
                   [9.0, 5.68],
                   [10.0, 5.68],
                   [11.0, 5.68],
                   [12.0, 5.68],
                   [13.0, 5.68],
                   [14.0, 5.68],
                   [15.0, 5.68],
                   [16.0, 5.68],
                   [17.0, 5.68]
                 ],
                 type: 'scatter'
               }]
           }
         ],
        scatterListnext: [
          {
            title: { text: 'PV图',x:'center',y: '8', },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            grid: {
              top: 40,
              bottom: 20,
            },
            xAxis: [{
              splitLine: {
                lineStyle: {
                }
              },
            },{
              splitLine: {
                lineStyle: {
                }
              },
            }],
            yAxis: [
              {
                type : 'value',
                //设置轴线的属性
                axisLine:{
                  lineStyle:{
                    // color:'#000',
                  }
                }
              },
              {
                type : 'value',
                //设置轴线的属性
                axisLine:{
                  lineStyle:{
                    // color:'#000',
                  }
                }
              }

            ],
            series: [{
              name: '二级驱动端气缸轴侧',
              symbolSize: 5,
              color: 'skyblue',
              data: [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
              ],
              type: 'scatter'
            },
              {
                symbolSize: 5,
                color: 'yellow',
                data: [
                  [5.0, 5.68]
                    [5.0, 5.98],
                  [6.0, 6.68],
                  [7.0, 6.98],
                  [8.0, 7.78],
                  [9.0, 8.68],
                  [10.0, 7.98],
                  [11.0, 6.88],
                  [12.0, 7.68],
                  [13.0, 8.68],
                  [14.0, 9.68],

                ],
                type: 'scatter'
              },
              {
                symbolSize: 5,
                color: 'pink',
                data: [
                  [1, 1]
                    [2, 2],
                  [3, 3],
                  [4, 4.98],
                  [5.0, 5.78],
                  [6.0, 5.68],
                  [7.0, 5.98],
                  [8.0, 5.88],
                  [9.0, 5.68],
                  [10.0, 5.68],
                  [11.0, 5.68],
                  [12.0, 5.68],
                  [13.0, 5.68],
                  [14.0, 5.68],
                  [15.0, 5.68],
                  [16.0, 5.68],
                  [17.0, 5.68]
                ],
                type: 'scatter'
              }]
          },
          {
            title: { text: 'PV图',x:'center',y: '8' },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            grid: {
              top: 40,
              bottom: 20,
            },
            xAxis: [{
              splitLine: {
                lineStyle: {
                }
              },
            },{
              splitLine: {
                lineStyle: {
                }
              },
            }],
            yAxis: [
              {
                type : 'value',
                //设置轴线的属性
                axisLine:{
                  lineStyle:{
                    // color:'#000',
                  }
                }
              },
              {
                type : 'value',
                //设置轴线的属性
                axisLine:{
                  lineStyle:{
                    // color:'#000',
                  }
                }
              }

            ],
            series: [{
              name: '二级自由端气缸轴侧',
              symbolSize: 5,
              color: 'skyblue',
              data: [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
              ],
              type: 'scatter'
            },
              {
                symbolSize: 5,
                color: 'blue',
                data: [
                  [5.0, 11.68]
                    [5.0, 5.98],
                  [6.0, 6.68],
                  [7.0, 6.98],
                  [8.0, 7.78],
                  [9.0, 8.68],
                  [10.0, 7.98],
                  [11.0, 6.88],
                  [12.0, 7.68],
                  [13.0, 8.68],
                  [14.0, 9.68],

                ],
                type: 'scatter'
              },
              {
                symbolSize: 5,
                color: 'pink',
                data: [
                  [1, 1]
                    [2, 2],
                  [3, 3],
                  [4, 4.98],
                  [5.0, 5.78],
                  [6.0, 5.68],
                  [7.0, 5.98],
                  [8.0, 5.88],
                  [9.0, 5.68],
                  [10.0, 5.68],
                  [11.0, 5.68],
                  [12.0, 5.68],
                  [13.0, 5.68],
                  [14.0, 5.68],
                  [15.0, 5.68],
                  [16.0, 5.68],
                  [17.0, 5.68]
                ],
                type: 'scatter'
              }]
          },
          {
            title: { text: 'PV图',x:'center',y: '8' },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            grid: {
              top: 40,
              bottom: 20,
            },
            xAxis: [{
              splitLine: {
                lineStyle: {
                }
              },
            },{
              splitLine: {
                lineStyle: {
                }
              },
            }],
            yAxis: [
              {
                type : 'value',
                //设置轴线的属性
                axisLine:{
                  lineStyle:{
                    // color:'#000',
                  }
                }
              },
              {
                type : 'value',
                //设置轴线的属性
                axisLine:{
                  lineStyle:{
                    // color:'#000',
                  }
                }
              }

            ],
            series: [{
              name: '二级驱动端气缸盖侧',
              symbolSize: 5,
              color: 'skyblue',
              data: [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
              ],
              type: 'scatter'
            },
              {
                symbolSize: 5,
                color: 'yellow',
                data: [
                  [5.0, 5.68]
                    [5.0, 5.98],
                  [6.0, 6.68],
                  [7.0, 6.98],
                  [8.0, 7.78],
                  [9.0, 8.68],
                  [10.0, 7.98],
                  [11.0, 6.88],
                  [12.0, 7.68],
                  [13.0, 8.68],
                  [14.0, 9.68],

                ],
                type: 'scatter'
              },
              {
                symbolSize: 5,
                color: 'pink',
                data: [
                  [1, 1]
                    [2, 2],
                  [3, 3],
                  [4, 4.98],
                  [5.0, 5.78],
                  [6.0, 5.68],
                  [7.0, 5.98],
                  [8.0, 5.88],
                  [9.0, 5.68],
                  [10.0, 5.68],
                  [11.0, 5.68],
                  [12.0, 5.68],
                  [13.0, 5.68],
                  [14.0, 5.68],
                  [15.0, 5.68],
                  [16.0, 5.68],
                  [17.0, 5.68]
                ],
                type: 'scatter'
              }]
          },
          {
            title: { text: 'PV图',x:'center',y: '8' },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            grid: {
              top: 40,
              bottom: 20,
            },
            xAxis: [{
              splitLine: {
                lineStyle: {
                }
              },
            },{
              splitLine: {
                lineStyle: {
                }
              },
            }],
            yAxis: [
              {
                type : 'value',
                //设置轴线的属性
                axisLine:{
                  lineStyle:{
                    // color:'#000',
                  }
                }
              },
              {
                type : 'value',
                //设置轴线的属性
                axisLine:{
                  lineStyle:{
                    // color:'#000',
                  }
                }
              }

            ],
            series: [{
              name: '二级自由端气缸盖侧',
              symbolSize: 5,
              color: 'skyblue',
              data: [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
              ],
              type: 'scatter'
            },
              {
                symbolSize: 5,
                color: 'yellow',
                data: [
                  [5.0, 5.68]
                    [5.0, 5.98],
                  [6.0, 6.68],
                  [7.0, 6.98],
                  [8.0, 7.78],
                  [9.0, 8.68],
                  [10.0, 7.98],
                  [11.0, 6.88],
                  [12.0, 7.68],
                  [13.0, 8.68],
                  [14.0, 9.68],

                ],
                type: 'scatter'
              },
              {
                symbolSize: 5,
                color: 'pink',
                data: [
                  [1, 1]
                    [2, 2],
                  [3, 3],
                  [4, 4.98],
                  [5.0, 5.78],
                  [6.0, 5.68],
                  [7.0, 5.98],
                  [8.0, 5.88],
                  [9.0, 5.68],
                  [10.0, 5.68],
                  [11.0, 5.68],
                  [12.0, 5.68],
                  [13.0, 5.68],
                  [14.0, 5.68],
                  [15.0, 5.68],
                  [16.0, 5.68],
                  [17.0, 5.68]
                ],
                type: 'scatter'
              }]
          }
        ],
        scatterList: []
      }
    },
    mounted() {
      this.scatterList = this.scatterListpre
    },
    methods:{
      nextPage() {
        this.scatterList = this.scatterListnext
      },
      prePage() {
        this.$nextTick(()=>{
          this.scatterList = this.scatterListpre
        })
      },
    }

  }
</script>

<style scoped>
  .classification {
    background: #409EFF;
    width: 100%;
    height: 1280px;
  }
  p {
    height: 60px;
    background: #97a8be;
    line-height: 60px;
    font-size: 26px;
    text-align: center;
  }
</style>
